<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="box"></div>
    输入价格:<input type="text" id="txt" />
    <button id="btn">确定</button>

    <script>
      // proxy()---Proxy 可以对目标对象的读取、函数调用等操作进行拦截，
      // 然后进行操作处理。它不直接操作对象，而是像代理模式，
      // 通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。
      // var room = {
      //   name: '安宁',
      //   phone: '13888888888',
      //   price: 150
      // }
      // //proxy代理room对象 new Proxy(代理的对象,{ get(){} set(){}})
      // var d = new Proxy(room, {
      //   get(target, key) {
      //     // target--代理的目标对象   key是对象key值
      //     if (key == 'price') {
      //       return target[key] + 30
      //     } else {
      //       return target[key]
      //     }
      //   },
      //   set() {}
      // })
      // console.log(d.price)
      // console.log(room)

      //

      var room = {
        name: '安宁',
        phone: '13888888888',
        price: 0
      }
      var btn = document.getElementById('btn')
      btn.onclick = function() {
        var txtval = document.getElementById('txt').value //输入的价格

        var d = new Proxy(room, {
          get(target, key) {
            return target[key]
          },
          set(target, key, value) {
            if (key == 'price') {
              if (value > 300) {
                target[key] = 300
              } else {
                target[key] = value
              }
            }
          }
        })
        // 设置代理对象的价格
        d.price = txtval
        document.getElementById('box').innerHTML = d.price
      }
    </script>
  </body>
</html>
